<template>
    <!-- 内容主体区域 -->
    <div class="content">
      <!-- 左侧榜单区域 -->
      <div class="left-side">
        <div class="tab">
          <div
              class="tab-item"
              :class="{ active: activeTab === 'vip' }"
              @mouseenter="setTab('vip')"
          >vip金榜</div>
          <div
              class="tab-item"
              :class="{ active: activeTab === 'completed' }"
              @mouseenter="setTab('completed')"
          >完结金榜</div>
          <div
              class="tab-item"
              :class="{ active: activeTab === 'thousand' }"
              @mouseenter="setTab('thousand')"
          >千字金榜</div>
        </div>

        <ul class="rank-list">
          <li
              v-for="(item, index) in rankData[activeTab]"
              :key="index"
              class="rank-item"
          >
            <span class="rank-tag">{{ item.rank }}</span>
            <div class="rank-title" >
              {{ item.title }}
            </div>
            <span class="author">{{ item.author }}</span>
          </li>
        </ul>

        <div class="rank-footer">
          <div class="rank-label">
            {{ footerLabel[activeTab] }}
          </div>
        </div>
      </div>

      <!-- 中间内容区域 -->
      <div class="middle-side">
        <div class="banner">
          <img src="@/assets/img/banner.png" alt="banner">
        </div>
<!--        展示图片以及小说名-->
        <div class="imageList">
          <div class="story" v-for="(yq, index) in yqList" :key="index">
            <div class="storyInfo">
              <img :src="require('@/assets/img/'+yq.storyimg)"  alt="小说图片"></img>
            </div>
            <div @click="goDetail(yq)" class="storyName">《{{yq.name}}》</div>
          </div>
        </div>

        <div class="notice">
          <h3 class="notice-title">最新公告</h3>
          <ul class="notice-list">
            <li class="notice-item">霸王票抽奖和儿童站征文已开启，点击查收端午赠礼！ </li>
            <li class="notice-item">五一快乐亿点点！动态装扮+超多好礼兑不停~ [04-29] </li>
            <li class="notice-item">小书喵五周年庆典有奖征集进行中，点击参与五一活动！ </li>
          </ul>
        </div>
      </div>

      <!-- 右侧推荐区域 -->
      <div class="right-side">
        <div class="recommend-box">
          <h3 class="recommend-title">vip强力推荐</h3>
          <ul class="recommend-list">
            <li
                v-for="(item, index) in recommendList"
                :key="index"
                class="recommend-item"
            >
              <div class="recommend-text">
                {{ item.title }}
              </div>
              <span class="recommend-author">{{ item.author }}</span>
            </li>
            <div class="report-item">
              <img src="@/assets/img/jb.png">
              <span class="report-word">电话：110</span>
            </div>
          </ul>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";  // 合并导入语句
import { router } from "@/router/router.ts";
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {require} from "@/utils/getFileUrl"

//创建钩子获取数据
let yqList = ref()

//获取数据的页面
onMounted(()=> {
  request.get("/getYq")
      .then(response => {
        yqList.value = response.data
      })
      .catch(error => {
        ElMessage.error(error)
      })
})

//使用小说对象作为参数并打开新窗口跳转详情页（导航栏上只显示小说id和名字）
function goDetail(story) {
  window.open(router.resolve({path: '/details',query:{"story":JSON.stringify(story)}}).href)
}


// 标签切换相关
const activeTab = ref('vip');
function setTab(tab: string) {
  activeTab.value = tab;
}

// 底部标签文本
const footerLabel = {
  vip: 'vip文月销量排行榜',
  completed: '完结文30日销量排行榜',
  thousand: '千字文月销量排行榜'
};

// 排行榜数据（带唯一ID）
const rankData = {
  vip: [
    { id: 1, rank: "探花", title: "探花", author: "卿隐" },
    { id: 2, rank: "榜眼", title: "我夫君是灭世魔头", author: "扶梦" },
    { id: 3, rank: "进士", title: "不入爱河", author: "蒋牧童" },
    { id: 4, rank: "探花", title: "救命！暗恋对象会读心", author: "图样先森" },
    { id: 5, rank: "榜眼", title: "被楼下帅哥冷脸劝归", author: "酥白" },
    { id: 6, rank: "进士", title: "在国子监开小卖部", author: "松雪醉" },
    { id: 7, rank: "探花", title: "开国皇帝的小公主", author: "笑佳人" },
    { id: 8, rank: "榜眼", title: "当我上门通婚发现对象是大佬", author: "七宝酥" },
    { id: 9, rank: "进士", title: "限制女主文主求生指南", author: "长明夜" }
  ],
  completed: [
    { id: 10, rank: "探花", title: "我夫君是灭世魔头", author: "扶梦" },
    { id: 11, rank: "榜眼", title: "年代文里的恶毒小后妈", author: "似伊" },
    { id: 12, rank: "进士", title: "在国子监开小卖部", author: "松雪醉" },
    { id: 13, rank: "探花", title: "从长生商团下凡", author: "小时竹一渣" },
    { id: 14, rank: "榜眼", title: "叮！甜度已超标", author: "弱水千流" },
    { id: 15, rank: "进士", title: "天后没死，她怎么可能隐个婚", author: "屿鱼" },
    { id: 16, rank: "探花", title: "我在废土世界扫垃圾", author: "青花在野" },
    { id: 17, rank: "榜眼", title: "和前夫一起穿进狗血文", author: "山有青木" },
    { id: 18, rank: "进士", title: "我是限制级女配", author: "君子在野" }
  ],
  thousand: [
    { id: 20, rank: "探花", title: "卿娘荣华路", author: "倾碧悠然" },
    { id: 21, rank: "榜眼", title: "稻荷崎经理每天都想", author: "朝唧唧" },
    { id: 22, rank: "进士", title: "跟你们天龙人说", author: "叫我苏三少" },
    { id: 23, rank: "探花", title: "雪香欲燃", author: "布丁琉璃" },
    { id: 24, rank: "榜眼", title: "太上皇年方二十二", author: "繁王轻霜" },
    { id: 25, rank: "进士", title: "服输", author: "习又" },
    { id: 26, rank: "探花", title: "引妻要[京圈]", author: "姜温夏" },
    { id: 27, rank: "榜眼", title: "潮湿天气", author: "宋昭" },
    { id: 28, rank: "进士", title: "小巷里的重组家庭", author: "白茄" }
  ]
};

// 右侧推荐列表数据（带唯一ID）
const recommendList = [
  { id: 30, title: "服输", author: "习又" },
  { id: 31, title: "引妻要[京圈]", author: "姜温夏" },
  { id: 32, title: "跟你们天龙人说", author: "叫我苏三少" },
  { id: 33, title: "潮湿天气", author: "宋昭" },
  { id: 34, title: "小巷里的重组家庭|六", author: "白茄" },
  { id: 35, title: "春夜琉光", author: "弥萝" },
  { id: 36, title: "太上皇年方二十二", author: "繁王轻霜" },
  { id: 37, title: "养大的反派疯魔了", author: "云奺" },
  { id: 38, title: "雪香欲燃", author: "布丁琉璃" },
  { id: 39, title: "卿娘荣华路", author: "倾碧悠然" },
  { id: 40, title: "稻荷崎经理每天都想", author: "朝唧唧" }
];


// 登录相关函数
function handleLogin() {
  console.log('触发登录操作');
}

// 注册相关函数
function handleRegister() {
  console.log('触发注册操作');
}

// 找回账号函数
function handleFindAccount() {
  console.log('触发找回账号操作');
}

// 找回密码函数
function handleFindPassword() {
  console.log('触发找回密码操作');
}

// 导航函数
function navigateTo(path: string) {
  console.log('导航到路径：', path);
}
function goTonovelList() {
  router.push({path: '/novelList'})
}
</script>

<style scoped>
@import '@/assets/css/yq.css';
</style>